import { Component, OnInit, Input } from '@angular/core';
import {HeroObject} from "../model/heroObject";
import {HomeService} from "../home/home.service";

//增加返回按钮
import {Location} from "@angular/common";

import {ActivatedRoute} from "@angular/router";

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  //传值的模型
   hero :  HeroObject;


  // ActivatedRoute保存着到这个 HeroDetailComponent 实例的路由信息。 这个组件对从 URL 中提取的路由参数感兴趣。 其中的 id 参数就是要显示的英雄的 id
  // HeroService 从远端服务器获取英雄数据，本组件将使用它来获取要显示的英雄
  //location 是一个 Angular 的服务，用来与浏览器打交道。 稍后，你就会使用它来导航回上一个视图。
  constructor( private route : ActivatedRoute,
               private heroService:HomeService,
               private location:Location) {

  }

  ngOnInit() {
    this.getHeroDetailObject();
  }

  getHeroDetailObject():void{

    //route.snapshot 是一个路由信息的静态快照，抓取自组件刚刚创建完毕之后。
    // paramMap 是一个从 URL 中提取的路由参数值的字典。 "id" 对应的值就是要获取的英雄的 id。
    //(+) 操作符会把字符串转换成数字，英雄的 id 就是数字类型
     const id = +this.route.snapshot.paramMap.get('id');
     console.log(id);

     //网络请求数据
    this.heroService.getSignleDetailWithId(id).subscribe(heroOject => this.hero = heroOject);
  }

  /***事件**/
  goback():void{
    this.location.back();
  }

  save():void{
      this.heroService.updateHero(this.hero).subscribe(() => this.goback());
  }

}
